import React from 'react';


import classnames from 'classnames';
//component
import ReTextField from 'components/widgets/ReTextField';
import { Spin } from 'antd';
import request from 'core/request.js';

import './index.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {
        //name: 'component name'
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            artistList: [],
            total: 0,
            searchLoading: false,
            searchUser: '',
            recordSearch: '',
            showSearchFlag: false,
            currentPage: 1
        };
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    authorNameFocus() {
        const { artistList, searchUser } = this.state;
        const { iValue } = this.props;
        if (iValue !== searchUser) {
            this.setToDefault();
            this.onChange(iValue);
        } else {
            this.setState({ showSearchFlag: artistList.length > 0 });
        }
    }

    authorNameBlur() {
        setTimeout(() => {
            this.setState({ showSearchFlag: false });
        }, 200);
    }

    setToDefault() {
        this.setState({
            searchLoading: false,
            showSearchFlag: false,
            total: 0,
            artistList: [],
        });
    }

    onChange(v) {
        this.setState({ searchUser: v });
        this.props.onChange(v);
        if (!!v) {
            this.search(1, v);
        } else {
            this.setToDefault();
        }
    }

    search(current, value) {
        if (!value || (!!value && !value.trim())) {
            return;
        }
        const { artistList, searchUser } = this.state;
        this.setState({
            searchLoading: value === searchUser && artistList.length > 0,
            currentPage: current ? current : this.state.currentPage,
            showSearchFlag: artistList.length > 0,
        });
        let searchValue = value || searchUser;
        let cPage = current ? current : this.state.currentPage;
        request({
            url: !searchValue ? $$.api('getArtistList') : $$.api('getArtistSearch'),
            data: {
                pageNumber: cPage, pageSize: 20,
                artistName: !!searchValue ? searchValue : null
            }
        }).then(res => {
            if (cPage > 1) {
                this.setState({ artistList: [...this.state.artistList, ...res.data.organizationList] });
            } else {
                this.setState({ artistList: res.data.organizationList || [] });
            }
            this.setState({ showSearchFlag: res.data.organizationList.length > 0 });
            let item = artistList.length > 0 ? artistList[0] : {};
            item = res.data.organizationList.length > 0 ? res.data.organizationList[0] : item;
            if (item.nickName === searchValue) {
                this.props.onChange(item.nickName, item.userId, item.id);
            }
            this.setState({ searchLoading: false, total: res.data.total });
            this.searchLoading = false;
        }).catch(err => {
            this.setToDefault();
        });
    }

    itemClick(e, item, onChange) {
        e && e.preventDefault();
        onChange(item.nickName, item.userId, item.id);
        this.setToDefault();
    }

    bottomScroll(e, ref) {
        if (ref.scrollTop + ref.clientHeight >= ref.scrollHeight && this.state.artistList.length < this.state.total) {
            this.search(this.state.currentPage + 1, this.state.searchUser);
        }
    }

    render() {
        const { iValue, placeHolder, onChange, searchPlaceholder, className } = this.props;
        const { searchLoading, artistList, searchUser, showSearchFlag } = this.state;
        let classname = 'orin-s-authorinput-root ' + className;
        return (
            <div className={classname}>
                <ReTextField
                    isLabel={false}
                    type="text"
                    className="input-wrapper"
                    notfullWidth={false}
                    onChange={(e, v) => this.onChange(v)}
                    onFocus={(e, v) => this.authorNameFocus()}
                    onBlur={(e, v) => this.authorNameBlur()}
                    maxLength="20"
                    value={iValue}
                    placeholder={placeHolder} />
                {
                    showSearchFlag &&
                    <div className="search-user-wrapper">
                        <div className="search-user-bottom">
                            <ul className="bottom-ul" ref="bottomUl"
                                onScroll={(e) => this.bottomScroll(e, this.refs.bottomUl)}>
                                {
                                    artistList && artistList.map(item => {
                                        return (
                                            <li key={item.id} onClick={(e) => this.itemClick(e, item, onChange)}
                                                className="bottom-li">
                                                <p className="li-name">
                                                    <span>{item.nickName}</span>
                                                </p>
                                                <p className="li-phone">{item.phone}</p>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                            <Spin spinning={searchLoading} size="large" />
                        </div>
                    </div>
                }
            </div>
        );
    }
}
